<template>
	<div class="tinymce-editor">
		<editor v-model="myValue" :init="init" :disabled="disabled" @onClick="onClick" style="z-index">			
		</editor>
		<span class="ant-input-suffix " v-if="myValue">
			<a-icon type="close-circle" theme="filled" class="ant-input-clear-icon" @click="clear" />
		</span>
		
	</div>
</template>

<script>
	import tinymce from 'tinymce/tinymce'
	import Editor from '@tinymce/tinymce-vue'
	import 'tinymce/icons/default/icons.min.js'
	import 'tinymce/themes/silver/theme'
	import 'tinymce/plugins/image'
	import 'tinymce/plugins/media'
	import 'tinymce/plugins/table'
	import 'tinymce/plugins/lists'
	import 'tinymce/plugins/contextmenu'
	import 'tinymce/plugins/wordcount'
	import 'tinymce/plugins/colorpicker'
	import 'tinymce/plugins/textcolor'
	import 'tinymce/plugins/fullscreen'
	import 'tinymce/plugins/advlist'
	
	function strip_tags (str, allowed_tags)
{
    var key = '', allowed = false;
    var matches = [];    var allowed_array = [];
    var allowed_tag = '';
    var i = 0;
    var k = '';
    var html = ''; 
    var replacer = function (search, replace, str) {
        return str.split(search).join(replace);
    };
    // Build allowes tags associative array
    if (allowed_tags) {
        allowed_array = allowed_tags.match(/([a-zA-Z0-9]+)/gi);
    }
    str += '';
    // Match tags
    matches = str.match(/(<\/?[\S][^>]*>)/gi);
    // Go through all HTML tags
    for (key in matches) {
        if (isNaN(key)) {
            // IE7 Hack
            continue;
        }
        // Save HTML tag
        html = matches[key].toString();
        // Is tag not in allowed list? Remove from str!
        allowed = false;
        // Go through all allowed tags
        for (k in allowed_array) {            // Init
            allowed_tag = allowed_array[k];
            i = -1;
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+'>');}
            if (i != 0) { i = html.toLowerCase().indexOf('<'+allowed_tag+' ');}
            if (i != 0) { i = html.toLowerCase().indexOf('</'+allowed_tag)   ;}

            // Determine
            if (i == 0) {               
                allowed = true;
                break;
            }
        }
        if (!allowed) {
            str = replacer(html, "", str); // Custom replace. No regexing
        }
    }
    return str;
}
	export default {
		components: {
			Editor
		},
		props: {
			value: {
				type: String,
				required: false
			},
			triggerChange: {
				type: Boolean,
				default: false,
				required: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
			plugins: {
				type: [String, Array],
				default: 'lists advlist image media table textcolor wordcount contextmenu fullscreen'
			},
			toolbar: {
				type: [String, Array],
				default: 'undo redo |  formatselect fontsizeselect | bold italic underline forecolor | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists image media table|removeformat | fullscreen'
			},
			height: {
				type: Number,
				default: 200
			}
		},
		data() {
			return {
				//初始化配置
				init: {
					language_url: '/tinymce/langs/zh_CN.js',
					language: 'zh_CN',
					skin_url: '/tinymce/skins/lightgray',
					height: this.height,
					plugins: this.plugins,
					toolbar: this.toolbar,
					branding: false,
					menubar: false, //隐藏菜单栏		
					// nowrap:true,
					/* plugins:"paste",
					paste_preprocess: function(plugin, args) {
						args.content = strip_tags(args.content,'<a>');
					}, */						
					images_upload_handler: (blobInfo, success) => {
						const img = 'data:image/jpeg;base64,' + blobInfo.base64()
						success(img)
					}
				},
				myValue: this.value
			}
		},
		mounted() {
			tinymce.init({})
		},
		methods: {
			onClick(e, editor) {
				tinymce.init({});
				this.$emit('onClick', e, tinymce)
			},
			//可以添加一些自己的自定义事件，如清空内容
			clear() {
				this.myValue = '';
			}
		},
		watch: {
			value(newValue) {
				this.myValue = newValue
			},
			myValue(newValue) {
				if (this.triggerChange) {
					this.$emit('change', newValue ? newValue : '')
				} else {
					console.log(2)
					this.$emit('input', newValue ? newValue : '')
				}
			}
		}
	}
</script>
<style scoped lang="less">
	/* /deep/.tinymce-container >>> .mce-fullscreen {
		  z-index: 10000;
		} */
		.tinymce-editor{
			position: relative;
			/deep/.ant-input-suffix {
				position: absolute;
				    top: 50%;
					right: 12px;
				    z-index: 2;
				    display: -webkit-box;
				    display: -ms-flexbox;
				    display: flex;
				    -webkit-box-align: center;
				    -ms-flex-align: center;
				    align-items: center;
				    color: rgba(0, 0, 0, 0.65);
				    line-height: 0;
				    -webkit-transform: translateY(-50%);
				    transform: translateY(-50%);
				.ant-input-clear-icon{
					 color: rgba(0, 0, 0, 0.65);
				}
				.ant-input-clear-icon:active {
				    color: rgba(0, 0, 0, 0.65);
				}
				
				.ant-input-clear-icon:hover {
				    color: rgba(0, 0, 0, 0.45);
				}
			}
		}
		
		
</style>
